<nz-descriptions [nzTitle]="title" nzBordered nzSize="small" [nzColumn]="{ xs: 1, sm: 1, md: 2, lg:2, xl:3, xxl:3}">
    <ng-container *ngFor="let f of fields">
        <ng-container [ngSwitch]="f.type">
            <nz-descriptions-item [nzTitle]="f.label" [nzSpan]="f.span || 1">
                <ng-container *ngSwitchCase="'text'">
                    {{ value[f.key] }}
                </ng-container>
                <ng-container *ngSwitchCase="'select'">
                    {{ f.options?.[value[f.key]] }}
                </ng-container>
                <ng-container *ngSwitchCase="'date'">
                    {{ value[f.key] | date: 'yyyy-MM-dd HH:mm:ss' }}
                </ng-container>
                <ng-container *ngSwitchCase="'progress'">
                    <nz-progress [nzPercent]="value[f.key]"></nz-progress>
                </ng-container>
                <ng-container *ngSwitchCase="'tags'">
                    <nz-tag *ngFor="let t of value[f.key]">{{ t }}</nz-tag>
                </ng-container>
                <ng-container *ngSwitchCase="'link'">
                    <a [routerLink]="f.link?.()">{{ value[f.key] }}</a>
                </ng-container>
                <ng-container *ngSwitchDefault>
                    {{ value[f.key] }}
                </ng-container>
            </nz-descriptions-item>
        </ng-container>
    </ng-container>
</nz-descriptions>
